import type { TeacherDispatchType } from '../../interface'
import { Tag } from 'antd-mobile'
import { useObserver } from 'mobx-react'
import arrowRight from '@/static/trainPlan/arrow_right.png'
import styles from './index.module.less'

interface Props<T extends TeacherDispatchType.Data> {
    item: T
    onClickItem?: (args: T) => any
}

/** 师资派遣卡片 */
const TeacherDispatchCard = (props: Props<TeacherDispatchType.Data>) => {
    const { item } = props

    /** 派遣状态映射 */
    const dispatchStateMap: Record<
        TeacherDispatchType.DispatchState,
        { text: string; color16: string }
    > = {
        0: { text: '待派遣', color16: '#FF8F20' },
        1: { text: '派遣中', color16: '#5894FF' },
        2: { text: '已派遣', color16: '#00B578' },
        3: { text: '取消派遣', color16: '#555' },
    }

    /** 派遣状态 */
    const dispatchState = (() => {
        if (!Object.keys(dispatchStateMap).includes(String(item.dispatch))) {
            return { text: '派遣错误', color16: '#FF3141' }
        }
        return dispatchStateMap[item.dispatch]
    })()

    return useObserver(() => {
        return (
            <div
                className={styles.planCard}
                key={item.id}
                onClick={() => [0, 1].includes(item.dispatch) && props.onClickItem?.(item)}
            >
                <div className={styles.planCard_header}>
                    <label>{item.name}</label>
                    <Tag color={dispatchState.color16} fill="outline">
                        {dispatchState.text}
                    </Tag>
                </div>

                <div className={styles.planCard_content}>
                    <div>
                        <div className={styles.planCard_content_unit}>
                            单位：{item.company_name}
                        </div>
                        <div className={styles.planCard_content_time}>
                            培训时间：{item.create_time}到{item.end_date}
                        </div>
                    </div>

                    {[0, 1].includes(item.dispatch) && (
                        <div className={styles.planCard_operation}>
                            <img src={arrowRight} />
                        </div>
                    )}
                </div>
            </div>
        )
    })
}

export default TeacherDispatchCard
